import { Graph } from '@antv/x6'

export const orgNode = Graph.registerNode(
  'org-node',
  {
    width: 200,
    height: 80,
    markup: [
      {
        tagName: 'rect',
        attrs: {
          class: 'card'
        }
      },
      {
        tagName: 'image',
        attrs: {
          class: 'image'
        }
      },
      {
        tagName: 'text',
        attrs: {
          class: 'rank'
        }
      },
      {
        tagName: 'text',
        attrs: {
          class: 'name'
        }
      },
      {
        tagName: 'text',
        attrs: {
          class: 'tbName'
        }
      },
      {
        tagName: 'g',
        attrs: {
          class: 'btn add'
        },
        children: [
          {
            tagName: 'circle',
            attrs: {
              class: 'add'
            }
          },
          {
            tagName: 'text',
            attrs: {
              class: 'add'
            }
          }
        ]
      },
      {
        tagName: 'g',
        attrs: {
          class: 'btn del'
        },
        children: [
          {
            tagName: 'image',
            attrs: {
              class: 'del'
            }
          }
        ]
      }
    ],
    attrs: {
      '.card': {
        rx: 10,
        ry: 10,
        refWidth: '100%',
        refHeight: '100%',
        fill: '#fff',
        stroke: '#000',
        strokeWidth: 1,
        pointerEvents: 'visiblePainted'
      },
      '.image': {
        x: 16,
        y: 11,
        width: 17,
        height: 15,
        opacity: 1
      },
      '.rank': {
        refX: 0.2,
        refY: 20,
        fill: '#000',
        fontFamily: 'Courier New',
        fontSize: 18,
        fontWeight: '600',
        textAnchor: 'start',
        textVerticalAnchor: 'middle'
      },
      '.name': {
        refX: 0.065,
        refY: 0.85,
        fill: 'rgba(153, 153, 153, 1)',
        fontFamily: 'Arial',
        fontSize: 14,
        textAnchor: 'start',
        textVerticalAnchor: 'middle'
      },
      '.tbName': {
        refX: 0.065,
        refY: 0.6,
        fill: '#000',
        fontFamily: 'Arial',
        fontSize: 14,
        textAnchor: 'start',
        textVerticalAnchor: 'middle'
      },
      '.btn.add': {
        refDx: 16,
        refY: '50%',
        event: 'node:add'
      },
      '.del': {
        x: 18,
        y: 16,
        width: 16,
        height: 17
      },
      '.btn.del': {
        refDx: -50,
        refY: 16,
        event: 'node:delete'
      },
      '.btn > circle': {
        r: 10,
        fill: 'transparent',
        stroke: '#000',
        strokeWidth: 1
      },
      '.btn.add > text': {
        fontSize: 20,
        fontWeight: 800,
        fill: '#000',
        x: -5.5,
        y: 7,
        fontFamily: 'Times New Roman',
        text: '+'
      }
    }
  },
  true
)

export const erNode = Graph.registerNode(
  'er-rect',
  {
    inherit: 'rect',
    markup: [
      {
        tagName: 'rect',
        selector: 'body'
      },
      {
        tagName: 'text',
        selector: 'label'
      },
      {
        tagName: 'image',
        selector: 'image'
      }
    ],
    attrs: {
      rect: {
        strokeWidth: 1,
        stroke: 'rgba(121, 121, 121, 1)',
        fill: 'rgba(255, 102, 0, 1)'
      },
      label: {
        fontWeight: 'bold',
        fill: '#ffffff',
        fontSize: 12
      },
      image: {
        width: 10,
        x: 130,
        y: 8,
        event: 'node:image'
      }
    },
    ports: {
      groups: {
        list1: {
          markup: [
            {
              tagName: 'rect',
              selector: 'portBody'
            },
            {
              tagName: 'text',
              selector: 'portNameLabel'
            },
            {
              tagName: 'circle',
              selector: 'circle'
            },
            {
              tagName: 'image',
              selector: 'image'
            }
          ],
          attrs: {
            portBody: {
              width: 150,
              height: 24,
              strokeWidth: 1,
              stroke: 'rgba(255, 102, 0, 1)',
              fill: 'rgba(255, 102, 0, 1)'
            },
            portNameLabel: {
              ref: 'portBody',
              refX: '50%',
              textAnchor: 'middle',
              refY: 6,
              fontSize: 12,
              fill: '#fff',
              fontWeight: 'bold'
            },
            circle: {
              r: 0
            },
            image: {
              width: 10,
              x: 130,
              y: 8,
              event: 'node:image'
            }
          },
          position: 'erPortPosition1'
        },
        list: {
          markup: [
            {
              tagName: 'rect',
              selector: 'portBody'
            },
            {
              tagName: 'text',
              selector: 'portNameLabel'
            },
            {
              tagName: 'circle',
              selector: 'circle'
            }
          ],
          attrs: {
            portBody: {
              width: 150,
              height: 24,
              strokeWidth: 1,
              stroke: 'rgba(121, 121, 121, 1)',
              fill: '#fff'
            },
            portNameLabel: {
              ref: 'portBody',
              refX: '50%',
              textAnchor: 'middle',
              refY: 6,
              fontSize: 10
            },
            circle: {
              r: 0
            }
          },
          position: 'erPortPosition'
        }
      }
    }
  },
  true
)

export const erPortPosition = Graph.registerPortLayout(
  'erPortPosition',
  (portsPositionArgs) => {
    return portsPositionArgs.map((_, index) => {
      return {
        position: {
          x: 0,
          y: (index + 1) * 24
        },
        angle: 0
      }
    })
  },
  true
)

export const erPortPosition1 = Graph.registerPortLayout(
  'erPortPosition1',
  (portsPositionArgs) => {
    return portsPositionArgs.map((_, index) => {
      return {
        position: {
          x: 0,
          y: 0
        },
        angle: 0
      }
    })
  },
  true
)

export const orgEdge = Graph.registerEdge(
  'org-edge',
  {
    zIndex: -1,
    attrs: {
      line: {
        strokeWidth: 2,
        stroke: '#dcdcdc',
        sourceMarker: null,
        targetMarker: null
      }
    }
  },
  true
)
